<template>
	<view class="body">
		<view class="body-top">
			<view class="item">
				<text>
					账号名称
				</text>
				<view class="item-name">
					<input class="input-name" type="nickname" maxlength="16" minlength="2" v-model="userInfo.nickName"
						@change='inputWord' placeholder="请输入昵称" />
				</view>
			</view>
			<view class="divider"></view>
			<view class="item">
				<text>
					头像设置
				</text>
				<view class="item-xq">
					<button class="my_txImg1" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" plain="true">
						<image class="my_txImg" :src="userInfo.userImg"></image>
					</button>
				</view>
			</view>
		</view>
		<view class="exit" @click="exit">
			确定
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{
					nickName:"",
					userImg:"",
				}
			};
		},
		methods: {
			// 清除登录
			exit() {
				// if(uni.getStorageSync("userInfo") && uni.getStorageSync(avar))
				// uni.navigateBack(-1)
				// wx.getSetting({
				//   success: (res) => {
				// 	  console.log(res);
				//     if (res.authSetting['scope.userInfo']) {
				//       // 已授权
				//       wx.getUserInfo({
				//         success: (userRes) => {
				//           console.log(userRes.userInfo); // 用户信息
				//         }
				//       });
				//     } else {
				//       // 未授权
				//       console.log('用户未授权');
				//     }
				//   }
				// });
				console.log(this.userInfo.nickName);
				
			},
			onChooseAvatar(e) {
				this.avatarUrl = e.detail.avatarUrl
				console.log('e.detail', e.detail)
				this.userInfo.userImg = this.avatarUrl
				this.uploadFile();
			},

			inputWord(e) {
				console.log('nickName', e)
				this.userInfo.nickName = e.detail.value
				let str = this.userInfo.nickName.trim();
				if (str.length == 0) {
					uni.showToast({
						title: '请输入合法的昵称',
						duration: 2000,
						icon: "none",
						mask: true,
					});
					return
				}
				if ((/[^/a-zA-Z0-9\u4E00-\u9FA5]/g).test(str)) {
					uni.showToast({
						title: '请输入中英文和数字',
						duration: 2000,
						icon: "none",
						mask: true,
					});
					return
				}
			},

			/* 上传 头像 转 话格式*/
			uploadFile() {
				console.log('上传图片', this.avatarUrl)
				uni.uploadFile({
					url: '/put-file', //服务器地址
					filePath: this.userInfo.userImg, //这个就是我们上面拍照返回或者先中照片返回的数组
					name: 'file',
					formData: {
						'user': 'test'
					},
					header: {
						'Authorization': 'Basic d2VjaGF0OndlY2hhdF9zZWNyZXQ',
						'Blade-Auth': 'bearer ' + uni.getStorageSync('token')
					},
					success: (uploadFileRes) => {
						let json = JSON.parse(uploadFileRes.data)
						console.log('json', json)
						this.avatarUrl = json.data.link
						this.userInfo.avatarUrl = this.avatarUrl
						uni.setStorageSync('userInfo', this.userInfo)
						this.updateUserInfo();
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
					},
					fail: e => {
						uni.showToast({
							title: '上传失败',
							duration: 2000,
							icon: "error",
							mask: true,
						});
					}
				});
			},

			updateUserInfo() {
				uni.request({
					url:"/wechatuser/update",
					method: "POST",
					data: this.userInfo,
					header: {
						Authorization: "Basic d2VjaGF0OndlY2hhdF9zZWNyZXQ",
						"Blade-Auth": "bearer " + uni.getStorageSync("token"),
					},
					success(res) {
						uni.showToast({
							title: '修改成功',
							duration: 2000,
							mask: true,
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	button[plain] {
		border: 0
	}

	.body-top {
		margin: 20rpx 20rpx 0rpx 20rpx;
		background-color: #FFF;
		border-radius: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.item {
		margin: 20rpx 20rpx 20rpx 20rpx;
		min-height: 70rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
	}

	.item-name {
		min-height: 70rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28rpx;
		text-align: end;
	}

	.input-name {
		margin-right: 10rpx;
		text-align: end;
	}

	.item-xq {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.my_txImg1 {
		height: 140rpx;
		background-color: #FFF;
		// border-radius: 50%;
	}

	.my_txImg {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
	}

	.my_back {
		width: 19rpx;
		height: 24rpx;

	}

	.divider {
		background: #E0E3DA;
		width: 95%;
		height: 2rpx;
		margin-left: 20rpx;
	}

	.exit {
		width: 590rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		// border: 1rpx rgba($color: #000000, $alpha: 0.1) solid;
		background-color: #5ac725;
		position: absolute;
		color: #fff;
		border-radius: 20rpx;
		// box-shadow: 0rpx 0rpx 9rpx rgba($color: #000000, $alpha: 0.1);
		bottom: 100rpx;
		margin-left: 80rpx;
	}
</style>